<template>
<div class="top-menu">
    <el-menu :default-active="activeIndex" mode="horizontal" text-color="#fff" @select="handleSelect">
        <el-menu-item index="0" @click.native="openHome(itemHome)" key="0">
            <template slot="title">
                <i :class="itemHome.source" style="color:#fff;"></i>
                <span>{{generateTitle(itemHome)}}</span>
            </template>
        </el-menu-item>
        <template v-for="(item, index) in menuAll">
            <el-menu-item :index="item.id+''" @click.native="openMenu(item)" :key="index+1" :tabindex="index+1">
                <template slot="title">
                    <i :class="item.icon || item.source" style="color:#fff;margin-right:5px;"></i>
                    <span>{{ generateTitle(item) }}</span>
                </template>
            </el-menu-item>
        </template>
    </el-menu>
</div>
</template>

<script>
import {
    mapGetters
} from "vuex";
import XEUtils from'xe-utils'
export default {
    name: "top-menu",
    data() {
        return {
            itemHome: {
                name: '首页',
                source: 'el-icon-menu',
            },
            activeIndex: "0",
            items: [],
        };
    },
    created() {
        this.getMenu();
    },
    computed: {
        ...mapGetters(["menuAll","menu"]),
    },
    watch: {
        $route(to, from) {
            // 对路由变化作出响应...
            this.getMenu();
        }
    },
    methods: {
        handleSelect(index,indexPath){
            //console.log(index,indexPath)
            //document.body.focus();
        },
        openHome(itemHome) {
            this.$router.push({
                path: this.$router.$avueRouter.getPath({
                    name: itemHome.name,
                    src: ''
                }, {})
            });
            this.$store.commit('SET_HOME_MENU', this.menuAll);
        },
        getMenu() {
            // this.$store.dispatch("GetTopMenu").then((res) => {
            //     this.items = res;
            // });
            let item;
            let cur = this.$router.$avueRouter.getValue(this.$route);
            this.menuAll.forEach((v,i) =>{
                if(v.children && v.children.length)
                if (v.children.find(v => XEUtils.startsWith(cur,v.path))) {
                    item = v;
                }
            })
            if(item){
                this.openMenu(item);
                this.$nextTick(() => {
                    this.activeIndex = item.id + ''
                })
            } else {
                let parentId = this.menu.length ? this.menu[0].parentId : null;
                if(parentId && parentId != '0'){
                    this.activeIndex = parentId + ''
                }
                if(cur == "/wel/index"){
                    this.openHome(this.itemHome);
                    this.$nextTick(() => {
                        this.activeIndex = '0'
                    })
                }
            }
        },
        generateTitle(item) {
            return this.$router.$avueRouter.generateTitle(
                item.label || item.name,
                (item.meta || {}).i18n
            );
        },
        openMenu(item) {

            let data = item.children;
            this.$store.commit('SET_MENU', data);
            //this.$store.dispatch("GetMenu", item.parentId).then((data) => {
            // if (data.length !== 0) {
            //     this.$router.$avueRouter.formatRoutes(data, false);
            // }
            let itemActive,
                childItemActive = 0;
            // if (item.path) {
            //   itemActive = item;
            // } else {
            //   if (this.menu[childItemActive].length == 0) {
            //     itemActive = this.menu[childItemActive];
            //   } else {
            //     itemActive = this.menu[childItemActive].children[childItemActive];
            //   }
            // }
            /* if (data.length !== 0) {
                itemActive = data[childItemActive]
            } else {
                itemActive = item;
            }
            this.$router.push({
                path: this.$router.$avueRouter.getPath({
                    name: itemActive.label || itemActive.name,
                    src: itemActive.path,
                    //i18n: itemActive.meta.i18n,
                }),
            }); */
            //});

            
        },
    },
};
</script>
